<template>
    <view :style="{'--color': color}">
        <status-bar title='加盟中心' :goHome='fromShare'></status-bar>
        <view class="topBg bg00 p-re">
            <view class="card thmeBg bor_radius_30 p-ab white">
                <image :src="imgUrl + 'Uploads/User_img/shadingImg.png'" mode="aspectFill" class="wh p-ab"></image>
                <view class="d-flex j-sb padding30">
                    <view class="size26 bold">加盟中心</view>
                    <view @click="toUrl('/joinPage/moreFranchise')">更多加盟</view>
                </view>
                <view class="d-flex m-bot30">
                    <view class="text-center w-333">
                        <view class="h7"><text class="size36 m-right4">{{ pageData.allStoreNum }}</text>个</view>
                        <view>加盟店铺</view>
                    </view>
                    <view class="text-center w-333">
                        <view class="h7"><text class="size36 m-right4">{{ pageData.allOrderNum }}</text>单</view>
                        <view>总单量</view>
                    </view>
                    <view class="text-center w-333">
                        <view class="h7"><text class="size36 m-right4">{{ pageData.allOrderMoney }}</text>元</view>
                        <view>总流水</view>
                    </view>
                </view>
                <view class="d-flex">
                    <view class="text-center w-333">
                        <view class="h7"><text class="size36 m-right4">{{ pageData.mOrderNum }}</text>单</view>
                        <view>上月单量</view>
                    </view>
                    <view class="text-center w-333">
                        <view class="h7"><text class="size36 m-right4">{{ pageData.mOrderMoney }}</text>元</view>
                        <view>上月流水</view>
                    </view>
                    <view class="text-center w-333" @click="toUrl('/joinPage/cashOut')">
                        <view class="h7"><text class="size36 m-right4">{{ pageData.mIncome }}</text>元</view>
                        <view class="p-re">上月收益<text class="iconfont icon-a-032 size40 p-ab"></text></view>
                    </view>
                </view>
            </view>
        </view>
        <view class="padding20 m-top50">
            <view class="size30 color_33 bold p-left20 p-bot20">我的加盟</view>
            <view class="item bgf8 bor_radius_6 padding20 d-flex m-bot20" v-for="(item,index) in storeList" :key="index"
                @click="toUrl('/joinPage/storeDetail?store_id=' + item.store_id + '&getType=1')">
                <image :src="$imgUrls(item.logo)" mode="aspectFill"></image>
                <view class="p-left20 flex-1">
                    <view class="m-bot10">
                        <text class="label m-right10 d-inline-block">{{ item.bussName }}</text>
                        <text class="size28 color_33 bold">{{ item.name }}</text>
                    </view>
                    <view class="d-flex j-sb a-center m-bot10">
                        <view class="h6 color_66 flex-1 m-right10">{{ item.address }}</view>
                        <view class="size26 color_6d">{{ item.distance }}km</view>
                    </view>
                    <view class="d-flex j-sb color_66">
                        <view class="text-center">
                            <view class="size32">{{ item.mOrderNum }}</view>
                            <view class="size22">上月单量(单)</view>
                        </view>
                        <view class="text-center">
                            <view class="size32">{{ item.mOrderMoney }}</view>
                            <view class="size22">上月流水(元)</view>
                        </view>
                        <view class="text-center">
                            <view class="size32 color_FOD">{{ item.mIncome }}</view>
                            <view class="size22">上月收益(元)</view>
                        </view>
                    </view>
                </view>
            </view>

            <empty v-if="noData" cat='3' msg='您还没有相关的店铺'></empty>
        </view>

        <showModel type="99" v-if="showModal" title="暂未加盟店铺" msg="是否立即去选择加盟" btn4="暂不加盟" btn2="立即加盟" 
            @cancelFunc="showModal = false" @otherFunc="back()" @certain="toUrl('/joinPage/moreFranchise')"></showModel>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            imgUrl: this.imgUrl,
            pageData: '',
            storeList: [],
            noData: false,
            showModal: false
        }
    },
    computed: {
        ...mapState(['color','position'])
    },
    async onLoad(e){
        if(e.fromShare) this.fromShare = e.fromShare
        this.getInfo()
        if(this.position.longitude == 0){
            await this.$pop.getLocation()
            if(this.position.longitude) this.getInfo()
        }    
    },
    methods: {
        getInfo(){ // 经纬度默认会传
            this.$http.post({
                url: '/osmxcxApi/getJoinInfo'
            }).then(res=>{
                this.pageData = res.data
                this.storeList = res.data.storeList || []
                if(!this.storeList.length){
                    this.noData = true
                    this.showModal = true
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.topBg {
    height: 300rpx;
    .card {
        width: 690rpx;
        height: 320rpx;
        left: 30rpx;
        top: 30rpx;
        z-index: 10;
        image {
            top: 0;
            left: 0;
            z-index: -1; // 解决点击失效问题
        }
        .icon-a-032 {
            // right: -40rpx;
            left: 20rpx;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}
.item {
    image {
        width: 120rpx;
        height: 120rpx;
    }
    .label {
        padding: 4rpx 10rpx;
        background: #990000;
        border-radius: 10rpx;
        font-size: 22rpx;
        color: #fff;
    }
}
</style>